<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>主页示例</title>
	<script type="text/javascript" src="js/xhr.js"></script>
	<script type="text/javascript">
		function init() {
			refresh();
		}
		function shuaxin() {
			//这里是请求协议，需要根据双方约定来
			var post_req =
			{
				"type": 1,
			};
			console.log('%s ', post_req)
			// printf("%s",post_req);
			XHR.post('cgi-bin/web.cgi', JSON.stringify(post_req),
				function (x, info) {
					for (var i = 0; i < info.data.length; i++) {

						if (info.data[i].key == 101) {
							document.getElementById('1001').value = info.data[i].val;
						}
						else if (info.data[i].key == 102) {
							document.getElementById('1002').value = info.data[i].val;
						}
						else if (info.data[i].key == 302) {
							document.getElementById('1006').value = info.data[i].val;
						}
						else if (info.data[i].key == 303) {
							document.getElementById('1007').value = info.data[i].val;
						}
						else if (info.data[i].key == 304) {
							document.getElementById('1008').value = info.data[i].val;
						}
						else if (info.data[i].key == 301) {
							document.getElementById('1005').value = info.data[i].val;
						}
					}
					//把界面中ID为"temp"的组件的值赋值成回复json的data数组的某个值
					// document.getElementById('temp').value = info.data[0].val;
				}
			);
		}

		function refresh() {
			//这里是请求协议，需要根据双方约定来
			var post_req =
			{
				"type": 2,
				"data": [{
					"key": document.getElementById(1003).value,
					"val": document.getElementById(1004).value
				}]
			};
			console.log('%s ', post_req)
			// printf("%s",post_req);
			XHR.post('cgi-bin/web.cgi', JSON.stringify(post_req),
				function (x, info) {
					for (var i = 0; i < info.data.length; i++) {

						if (info.data[i].key == 101) {
							document.getElementById('1001').value = info.data[i].val;
						}
						else if (info.data[i].key == 102) {
							document.getElementById('1002').value = info.data[i].val;
						}
						else if (info.data[i].key == 302) {
							document.getElementById('1006').value = info.data[i].val;
						}
						else if (info.data[i].key == 303) {
							document.getElementById('1007').value = info.data[i].val;
						}
						else if (info.data[i].key == 304) {
							document.getElementById('1008').value = info.data[i].val;
						}
						else if (info.data[i].key == 301) {
							document.getElementById('1005').value = info.data[i].val;
						}
					}
					//把界面中ID为"temp"的组件的值赋值成回复json的data数组的某个值
					// document.getElementById('temp').value = info.data[0].val;
				}
			);
		}
	</script>
</head>

<body onload="init()">
	<center>
		<h1>边缘网管系统</h1>
		</div>
		<h2>modbus采集</h2>
		点击刷新数据：
		<input type="button" name="wenan" id="1000" onclick="shuaxin()">
		<br>
		温度：<input type="text" name="wendu" value="XXX" id="1001">
		<br>
		湿度：<input type="text" name="shidu" value="XXX" id="1002">
		<br>
		设备操作：<br>
		空调开关：103 <br>空调温度控制：104 <br>灯开关：105
		<br>
		0：关 1：开
		<br>
		设备<input type="text" name="name" id="1003"><br>
		操作<input type="text" name="caozuo" id="1004">
		发送<input type="button" name="caozuo" id="1009" onclick="refresh()">

		<h2>stm32数据</h2>
		点击刷新数据：
		<input type="button" name="wenan" id="1010" onclick="shuaxin()">
		<br>
		温度：<input type="text" name="wendu" value="XXX" id="1005">
		<br>
		湿度：<input type="text" name="shidu" value="XXX" id="1006">
		<br>
		电池：<input type="text" name="dianchi" value="XXX" id="1007">
		<br>
		开关：<input type="text" name="kaiguan" value="XXX" id="1008">
	</center>

</body>

</html>